<template>
  <div class="Visitor30Line-water">
    <div class="wu-chart" ref="wuChartRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import moment from 'moment'
import { setAutoHoverIntervalFun } from '@/utils/echartUtils'
let wuChartRef = ref()
let wuChart: echarts.ECharts = {} as echarts.ECharts

let startMonth = moment().startOf('month')
const endMonth = moment().endOf('month')
// 造数据
const getXData = () => {
  let xData = []
  let yData = []
  console.log('startMonth.valueOf()', startMonth.valueOf())

  while (startMonth.valueOf() <= endMonth.valueOf()) {
    const MM = startMonth.format('MM')
    const dd = startMonth.format('DD')
    xData.push(`${MM}/${dd}`)
    const randomData = Math.floor(Math.random() * 100000)

    yData.push(randomData)
    startMonth.add(1, 'days')
  }

  return {
    xData,
    yData
  }
}
const chartData = getXData()

const options: echarts.EChartOption = {
  grid: {
    left: 60,
    right: 30,
    top: 40,
    bottom: 40
  },
  // axisPointer: {
  //   show: true,
  //   type: 'line',
  //   snap: true
  // },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      // axis: 'auto',
      snap: true
    },
    formatter: (param) => {
      const { name, value } = (param as { name: string; value: string }[])[0]
      return `<div class="chart-tooltip">
        <span>
          ${name} <i>${value}</i>人次访问
        </span>
        </div>`
    },
    extraCssText: 'padding: 0;border: none;background-color:transparent;'
  },
  xAxis: {
    type: 'category',
    data: chartData.xData,
    splitLine: {
      show: false
    },
    axisLine: {
      show: false,
      symbol: ['none', 'arrow']
    },
    axisLabel: {
      color: '#74b6ee'
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    name: '(访问量)',
    nameTextStyle: {
      color: '#7ec7ff',
      fontSize: 12,
      padding: [0, 30, -4, 0]
    },
    type: 'value',
    minInterval: 1,
    axisLabel: {
      color: '#74b6ee'
    },
    splitLine: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#816939' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#17184d' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      // showSymbol: false,
      emphasis: {
        // showSymbol: true
      },
      itemStyle: {
        color: '#f0b454',
        borderType: 'dotted'
      },
      lineStyle: {
        color: '#707070'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#816939' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#17184d' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      },
      data: chartData.yData
    }
  ]
}
// 停止播放函数
let stopFun: Function
onMounted(() => {
  wuChart = echarts.init(wuChartRef.value)
  wuChart.setOption(options)
  const { init, stop } = setAutoHoverIntervalFun(wuChart, chartData.xData)
  init()
  stopFun = stop
})
onUnmounted(() => {
  stopFun()
})
</script>

<style lang="scss" scoped></style>
